<template>
  <div class="content">
    <div class="kong"></div>
    <img
      class="banner"
      src="https://akk.028wkf.cn/kdb-weapp-img/data-img/common-data-banner.png"
      mode="scaleToFill"
      @click="buyMarketingLinkClick"
    />
    <div class="data-list">
      <div v-for="(item,index) in dataList" :key="index" v-show="item.isShow">
        <div class="top">
          <img :src="item.img" mode="widthFix" />
          <span>{{item.title}}</span>
        </div>
        <div class="dataContent">
          <div
            v-for="(e,i) in item.list"
            :key="i"
            @click="linkDataClick(e.key, item.isClick)"
          >
            <img :src="e.img" mode="widthFix" />
            <div>
              <p>{{e.value}}</p>
              <span>{{e.label}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  SHOP_SALES_COUNT_DAY, // 店铺每天订单统计
  COUNT_MONTHLY_REBATE_API_DAY, // 每天返佣统计
  SHOP_EVALUATION_COUNT, // 评分率
  SHOP_COLLECTION_COUNT, // 收藏数
  NEW_SHARE_DATA_COUNT // 查询店铺推荐数据汇总
} from '@/api'
import { dateFormatter } from '@/utils'

export default {
  components: {},
  props: {},
  data () {
    return {
      dataForm: {
        orderAmount: '0.00',
        orderNum: 0,
        rebateAmount: '0.00'
      },
      countForm: {
        collect: 0,
        shopAssessAvg: '0'
      },
      promoteForm: {
        memberCount: 0,
        twoShareShopMemberCount: 0,
        oneShareShopCount: 0,
        twoShareShopCount: 0
      }
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    dataList () {
      return [
        // to do 无初始值时数据不渲染
        {
          title: '营收数据',
          isShow: true,
          isClick: true,
          img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/revenue-title.png',
          list: [
            {
              label: '销售额',
              value: this.dataForm.orderAmount,
              img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/revenue1.png',
              key: 'orderAmount'
            },
            {
              label: '订单数',
              value: this.dataForm.orderNum,
              img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/revenue2.png',
              key: 'orderNum'
            },
            {
              label: '返佣金额',
              value: this.dataForm.rebateAmount,
              img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/revenue3.png',
              key: 'rebateAmount'
            }
          ]
        },
        {
          title: '用户粘度',
          isShow: true,
          isClick: false,
          img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/user-title.png',
          list: [
            {
              label: '收藏量',
              value: this.countForm.collect,
              img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/user1.png'
            },
            {
              label: '好评',
              value: this.countForm.shopAssessAvg,
              img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/user2.png'
            }
          ]
        },
        {
          title: '推广数据',
          isShow: true,
          isClick: false,
          img:
            'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize-title.png',
          list: [
            {
              label: '会员',
              value: this.promoteForm.memberCount
                ? this.promoteForm.memberCount
                : 0,
              img:
                'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize1.png'
            },
            {
              label: '直推店会员',
              value: this.promoteForm.oneShareShopMemberCount
                ? this.promoteForm.oneShareShopMemberCount
                : 0,
              img:
                'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize2.png'
            },
            {
              label: '间推店会员',
              value: this.promoteForm.twoShareShopMemberCount
                ? this.promoteForm.twoShareShopMemberCount
                : 0,
              img:
                'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize3.png'
            },
            {
              label: '直推店',
              value: this.promoteForm.oneShareShopCount
                ? this.promoteForm.oneShareShopCount
                : 0,
              img:
                'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize11.png'
            },
            {
              label: '间推店',
              value: this.promoteForm.twoShareShopCount
                ? this.promoteForm.twoShareShopCount
                : 0,
              img:
                'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize22.png'
            },
            {
              label: '间间推店',
              value: this.promoteForm.threeShareShopCount
                ? this.promoteForm.threeShareShopCount
                : 0,
              img:
                'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize33.png'
            }
          ]
        }
      ]
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.getSalesCountDay()
    this.rebateASalesCountDay()
    this.shopEvaluationCount()
    this.shopCollectionCount()
    this.getNewShareDateCount()
  },
  methods: {
    linkDataClick (key, isClick) {
      if (isClick) {
        this.$router.push(`/pages/data-analyze/data-echarts/main?type=${key}`)
      }
    },
    /** api **/
    getSalesCountDay () {
      const vm = this
      let day = dateFormatter('yyyy-MM-dd', new Date())
      let params = {
        shopId: vm.account.shopId,
        state: '3'
      }
      params.orderDateStart = `1970-01-01 00:00:00`
      params.orderDateEnd = `${day} 23:59:59`
      SHOP_SALES_COUNT_DAY(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            let val = arr.reduce((acc, _) => {
              acc += _.saleAmount
              return acc
            }, 0)
            let num = arr.reduce((acc, _) => {
              acc += _.saleNum
              return acc
            }, 0)
            // arr.forEach(_ => {
            //   _.saleAmount = _.saleAmount.toFixed(2)
            // })
            vm.dataForm.orderAmount = val.toFixed(2)
            vm.dataForm.orderNum = num
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    rebateASalesCountDay () {
      const vm = this
      let params = {
        relateId: vm.account.shopId,
        identity: 'SHOP',
        state: '1'
        // type: '4'
      }
      let day = dateFormatter('yyyy-MM-dd', new Date())
      params.createDateStart = `1970-01-01 00:00:00`
      params.createDateEnd = `${day} 23:59:59`
      COUNT_MONTHLY_REBATE_API_DAY(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            let val = arr.reduce((acc, _) => {
              acc += _.amount * 0.01 + _.point * 0.0001
              return acc
            }, 0)
            vm.dataForm.rebateAmount = val.toFixed(2)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 返佣金额（固定了的每天）
    shopEvaluationCount () {
      const vm = this
      SHOP_EVALUATION_COUNT(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            let { shopAssessAvg } = r.data.data
            vm.countForm.shopAssessAvg = shopAssessAvg
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 评分率
    shopCollectionCount () {
      const vm = this
      SHOP_COLLECTION_COUNT(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.countForm.collect = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 收藏数
    getNewShareDateCount () {
      const vm = this
      NEW_SHARE_DATA_COUNT(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.promoteForm = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  width: 100%;
  background: #f2f3f5;
  > .kong {
    height: 15px;
  }
  > .banner {
    width: 95%;
    height: 90px;
    display: block;
    margin: 0 auto 15px;
    border-radius: 10px;
  }
  > .data-list {
    width: 95%;
    margin: auto;
    border-radius: 10px;
    > div {
      border-radius: 10px;
      background: #fff;
      margin-bottom: 15px;
      padding-bottom: 10px;
      > .top {
        display: flex;
        align-items: center;
        > img {
          width: 20px;
          height: 20px;
          border-radius: 50px;
          margin: 0 10px;
        }
        > span {
          font-size: 14px;
          line-height: 40px;
        }
      }
      > .dataContent {
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        > div {
          width: 33.33%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
          > img {
            width: 18px;
            height: 18px;
            // margin-right: 5px;
          }
          > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            color: #000;
            width: 75px;
            > span {
              font-size: 14px;
            }
            > p {
              font-size: 12px;
              margin-top: 4px;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}
</style>
